<template>
	<view style="width: 100%;">
		<view class="u-flex u-row-between">
			<view class="">
				信用额度   {{limitDetail.used}}  /  {{limitDetail.total}}
			</view>
			<view v-if="limitDetail.used<limitDetail.total">
				剩余额度 {{limitDetail.balance}}
			</view>
			<view v-else style="color:#ff551a">
				额度不足
			</view>
		</view>
		<u-line-progress class="used-progress u-m-t-20 " :show-percent="false"  :percent="limitDetail.used<limitDetail.total?(limitDetail.used/limitDetail.total)*100:100"  height="38"></u-line-progress>
	</view>
</template>

<script>
	export default {
		name:"process-used",
		data() {
			return {
				limitDetail:{},
			};
		},
		props:{
			sellerId:{
				type:String,
				default:""
			},
			buyerId:{
				type:String,
				default:""
			},
			totalPrice:{
				type:Number,
				default:0
			},
			noTips:{
				type:Boolean,
				default:false
			}
		},
		created() {
			this.getCreditLimitDetailFn();
		},
		mounted(){
			
		},
		methods:{
			async getCreditLimitDetailFn(){
				const res = await this.$newHttp.get('api/Contract/GetCreditLimitDetailBySellerAndBuyer', {
					params: {
						buyerId: this.buyerId,
						sellerId: this.sellerId
					}
				});
				if(res.code === 200){
					this.limitDetail = res.data;
					let isAdequate = this.limitDetail.balance>=this.totalPrice;
					let sendData = {
						settlementMethod:res.data.settlementMethod,
						isAdequate:isAdequate
					}
					this.$emit('sendAdequate',sendData);
				}
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.used-progress{
		::v-deep .u-active{
			background:linear-gradient(90deg, #FFBB1A, #FF551A);
		}
	}
</style>